<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>账号管理-管理系统</title>
        <meta name="keywords" content="管理系统">
        <meta name="description" content="管理系统">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="{$sys_url.static}layui/css/layui.css" media="all">
        <script src="{$sys_url.static}layui/date.js" charset="utf-8"></script>
        <script src="{$sys_url.static}layui/layui.js" charset="utf-8"></script>
    </head>
    <body>
        <div>
            <form class="layui-form">
                <div class="layui-form-item layui-elem-quote">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" id="id" autocomplete="off" placeholder="请输入ID" class="layui-input"> 
                    </div>
                    <label class="layui-form-label">路径</label>
                    <div class="layui-input-inline">
                        <input type="text" name="path" id="path" autocomplete="off" placeholder="请输入路径" class="layui-input">
                    </div>
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" autocomplete="off" placeholder="请输入名称" class="layui-input">
                    </div>
                    <label class="layui-form-label">层级</label>
                    <div class="layui-input-inline">
                        <input type="text" name="level" id="level" autocomplete="off" placeholder="请输入层级" class="layui-input">
                    </div>
                    <button type="button" class="layui-btn btnSearch" lay-filter="search" lay-submit>查询</button>
                    <button type="button" class="layui-btn layui-btn-normal btnAdd">+ 新增</button>
                </div>
            </form>
            <input type="hidden" name="pid" id="pid"  value="{$pid}" id="pid"class="layui-input">
            <table class="layui-hide" id="tableList" lay-filter="demo">
            </table>


        </div>
    </body>
    <script src="{$sys_url.static}layui/layui.js" charset="utf-8"></script>

    <script type="text/html" id="treeForm">  
        <!-- 0 --> 
        {{#  if(d.level==0){ }} 

        <div class="layui-table-cell laytable-cell-1-name" style=" margin-left: 0px">
            <span class="treeTable-icon open" lay-tid="6" lay-tpid="5" lay-ttype="dir"><span class="treeTable-empty">

                </span><i class="layui-icon layui-icon-triangle-d"></i>
                {{d.name}}</span>
        </div>
        {{#  }  }} 
        <!-- 1 --> 
        {{#  if(d.level==1){ }} 
        <div class="layui-table-cell laytable-cell-1-name" style=" margin-left: 15px">
            <span class="treeTable-icon open" lay-tid="6" lay-tpid="5" lay-ttype="dir"><span class="treeTable-empty"> 
                </span><i class="layui-icon layui-icon-triangle-d"></i>
                {{d.name}}</span>
        </div>
        {{#  }  }}
        <!-- 2 --> 
        {{#  if(d.level==2){ }} 
        <div class="layui-table-cell laytable-cell-1-name" style=" margin-left: 30px">
            <span class="treeTable-icon open" lay-tid="6" lay-tpid="5" lay-ttype="dir"><span class="treeTable-empty"> 
                </span><i class="layui-icon layui-icon-triangle-d"></i>
                {{d.name}}</span>
        </div>
        {{#  }  }} 
        <!-- 3 --> 
        {{#  if(d.level==3){ }} 
        <div class="layui-table-cell laytable-cell-1-name" style=" margin-left: 45px">
            <span class="treeTable-icon open" lay-tid="7" lay-tpid="5" lay-ttype="file">
                <span class="treeTable-empty"> 
                </span><i class="layui-icon layui-icon-file"></i>&nbsp;&nbsp;
                {{d.name}}</span>
        </div>
        {{#  }  }} 
    </div>
</script>
<script type="text/html" id="add_time">
    {{ dateFormat(d.add_time) }}
</script>
<script type="text/html" id="update_time">
    {{ dateFormat(d.update_time) }}
</script>
<script type="text/html" id="statusSwitch">
    <!--0:禁用; 1:启用 --> 
    <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}> 
</script>
<script type="text/html" id="islogin">

    <label>
        {{#  if(d.islogin == '1'){ }}
        <span style="color: #F581B1;">是</span>
        {{#  } else { }}
        否
        {{#  } }}
    </label>

</script>
<script type="text/html" id="barDemo"> 

    <a class="layui-btn layui-btn-xs" lay-event="child" pid="{{d.id}}">子节点</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" pid="">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use('table', function () {
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
//加载表格
    table.render({
        elem: '#tableList'
        , url: '{$sys_url.ctr}/getList'
        , cellMinWidth: 80
                //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
                {field: 'id', width: '5%', title: 'ID', sort: true, align: 'center'},
                {field: 'name', width: '15%', title: '名称', align: 'left', toolbar: '#treeForm'},
                {field: 'level', title: '层级', align: 'center'},
                {field: 'module', title: '模块', align: 'center'},
                {field: 'controller', title: '控制器', align: 'center'},
                {field: 'action', title: '行为', align: 'center'},
                {field: 'method', title: '请求类型', align: 'center'},
                {field: 'url', title: 'URL', align: 'left'},
                {field: 'px', title: '排序', align: 'center', edit: 'text'},
                {field: 'islogin', title: '验证登录', align: 'center',templet: '#islogin'},
                {field: 'status', title: '状态', align: 'center', templet: '#statusSwitch', unresize: true},
                {field: 'add_time', title: '添加时间', align: 'center',templet: '#add_time'},
                {field: 'update_time', title: '修改时间', align: 'center',templet: '#update_time'},
                {fixed: 'right', width: '16%', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]],
        page: true,
        limit: 1000,
        limits: [20, 50, 100, 500, 1000, 5000],
        text: '对不起，加载出现异常！',
        request: {
            pageName: 'page' //页码的参数名称，默认：page
            , limitName: 'pageNum' //每页数据量的参数名，默认：limit
        }

    });


    //监听禁用启用操作
    form.on('switch(statusDemo)', function (obj) {  
            var id=this.id;
            var status=0;
            console.log(obj.elem.checked);
            if(obj.elem.checked){ status=1}
            $.ajax({
            url: '{$sys_url.ctr}/status',
            type: 'post',
            data: {ids: id,status:status},
            dataType: "json",
            beforeSend: function () {
                
            },
            success: function (data) {
                //do something
                console.log(data);
                if (data.code == 1) {
                    var index = parent.layer.getFrameIndex(window.name);
                    //获取当前窗口索引
                    parent.layer.msg('操作成功', {icon: 1});
                    //table.reload('tableList');
                } else {
                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                }
            },
            error: function (data) {
                //do something
                console.log(data);
                layer.msg('与服务器连接失败', {icon: 2});
            }
        });
//        layer.tips(this.value + ' ' + this.name+ '：' + obj.elem.checked, obj.othis);
    });

    table.on('edit(demo)', function (obj) {
        var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段

        $.ajax({
            url: '{$sys_url.ctr}/sort',
            type: 'post',
            data: {id: data.id, px: obj.value},
            dataType: "json",
            beforeSend: function () {
                console.log(JSON.stringify(data.field));
            },
            success: function (data) {
                //do something
                console.log(data);
                if (data.code == 1) {
                    var index = parent.layer.getFrameIndex(window.name);
                    //获取当前窗口索引
                    parent.layer.msg('操作成功', {icon: 1});
                } else {
                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                }
            },
            error: function (data) {
                //do something
                console.log(data);
                layer.msg('与服务器连接失败', {icon: 2});
            }
        });
    });


//重载表格
    $('.btnSearch').on('click', function () {
        $('#pid').val(0);
        table.reload('tableList', {
            page: {
                page: 1
                        //重新从第 1 页开始
            },
            where: {
                pid: null,
                key: {
                    id: $('#id').val(),
                    name: $('#name').val(),
                    path: $('#path').val(),
                    level: $('#level').val()
                }

            }
        });
    });


//监听工具条
    table.on('tool(demo)', function (obj) {
        var data = obj.data; 
        if (obj.event === 'detail') {

        } else if (obj.event === 'del') {
            layer.confirm('ID：' + data.id + '<br />名称：' + data.name, {icon: 3, title: '是否确定删除?'}, function (index) {
                if (index >= 1)
                {
                    $.ajax({
                        url: '{$sys_url.ctr}/del',
                        type: 'post',
                        data: {id: data.id},
                        dataType: "json",
                        beforeSend: function () {
                            console.log(JSON.stringify(data.field));
                        },
                        success: function (data) {
                            //do something
                            console.log(data);
                            if (data.code == 1) {
                                var index = parent.layer.getFrameIndex(window.name);
                                //获取当前窗口索引
                                parent.layer.msg('删除成功', {icon: 1});
                                table.reload('tableList');
                            } else {
                                layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                            }
                        },
                        error: function (data) {
                            //do something
                            console.log(data);
                            layer.msg('与服务器连接失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                }
            });
        } else if (obj.event === 'edit') {
            layer.open({
                title: '编辑',
                type: 2,
                shade: false,
                area: ['800px', '600px'],
                maxmin: true,
                btnAlign: 'c',
                anim: 0,
                shade: [0.5, 'rgb(0,0,0)'],
                content: '{$sys_url.ctr}/edit?id=' + data.id,
                zIndex: layer.zIndex, //重点1
                success: function (layero) {
                    //layer.setTop(layero); //顶置窗口
                },
                yes: function (index, layero) {
                    //确认按钮
                }
            });
        } else if (obj.event === 'child') {
            var pid = $(this).attr('pid');
            $('#pid').val(pid);
            table.reload('tableList', {
                page: {
                    curr: 1
                            //重新从第 1 页开始
                },
                where: {
                    pid: pid,
                }
            });
        }

    });
//新增
    $('.btnAdd').on('click', function () {

        layer.open({
            title: '新增',
            type: 2,
            shade: false,
            area: ['800px', '600px'],
            maxmin: true,
            btnAlign: 'c',
            anim: 0,
            shade: [0.5, 'rgb(0,0,0)'],
            content: '{$sys_url.ctr}/add?pid=' + $('#pid').val(),
            zIndex: layer.zIndex,
            //重点1
            success: function (layero) {
                //layer.setTop(layero); //顶置窗口
            },
            yes: function (index, layero) {
                //确认按钮
            }
        });
    });
});
</script>
</html>